<template lang="pug">
  .minimap.animated.fadeIn(ref="miniMap", v-show='isShow && !isHandClose && miniMapData', :class="{ big: isBigBtn }")
    .icon.zoom.hand.pos-a(@click.stop.prevent="bigMap")
      i.iconfont.icon-scale-plus(v-if="!isBigBtn")
      i.iconfont.icon-scale-reduce(v-else)
    .ctrl-box-top.pos-a.tac
      .icon.hand.active(@click="hideMap", v-if="!isBigBtn")
        i.iconfont &#xe60b;
      .icon.hand.active(@click="bigMap", v-else)
        i.iconfont &#xe60b;
    .map-box(ref="mapBox", @click="tapImgScaleMap")
      img(:src="mapImg")
      .point
        .item(
          :class="{'active': currentPoint == index }",
          v-for="(point, index) in formatMapList",
          :style="[styleObj[index]]",
          @click.stop="handleClick(point.scene_id, index)")
          .circle(
            v-if="currentPoint != index")
</template>

<script>
let timer = null
import { hasMiniMap } from '@/utils/menu'
import { isMobile, isPc, isPad } from '@/utils'
// g模板的小地图默认不显示,点击显示

export default {
  data() {
    return {
      isShow: false,
      isHandClose: false,
      mapImg: '',
      num: 20,
      miniMapData: null,
      formatMapList: [],
      styleObj: [],
      bgStyle: { "background-image": "url('/static/images/scan.png')" },
      currentPoint: 0,
      isBigBtn: false,
      maxScle: 4,
      pointStarthlookat: 0,
      mapCfg: {
        mapwidth: 300,
        pointwidth: 6,
        pointheight: 6,
        curpointwidth: 30,
        curpointheight: 30
      }
    }
  },
  mounted() {
    if(isMobile()) {
      this.maxScle = 1.5
      this.mapCfg.mapwidth = 180
    }

    if(isPad()) {
      this.maxScle = 2
      this.mapCfg.mapwidth = 300
    }
    if(isPc()) {
      this.maxScle *= window.outerWidth / 1920
    }
    this.$nextTick(() => {
      setTimeout(() => {
        let data = hasMiniMap(this.$krp.getSceneId())
        if(data) {
          this.miniMapData = data.miniMapObj
          this.isShow = false
          this.getMap(this.miniMapData)
        }
      }, 2000)
    })

    this.$vgo.on('minimap:toggle', () => {
      this.isHandClose = false
      this.isShow = !this.isShow
      if (!this.miniMapData) {
        this.$vgo.tip('当前场景无导览图!')
      }
    })

    // 场景切换时候如果有小地图则更新
    this.$vgo.on('update:minimap', data => {
      // data = data || hasMiniMap(this.$krp.getSceneId())

      // if (!this.isHandClose) {
      //   this.isShow = true
      // }
      // 延迟一下，否则获取不到dom
      if (data) {
        setTimeout(() => {
          this.miniMapData = data.miniMapObj
          this.getMap(data.miniMapObj)
        }, 20)
      }else {
        this.miniMapData = null
      }
    })
  },
  methods: {
    getMap(mapList) {

      this.mapImg = $globalconfig.URLS.API + mapList.map_images
      this.formatMapList = []
      this.styleObj = []

      let list = mapList.mappointList
      let oW = 720, // 获取到图片实际宽度 720*oh/ow = x
          oH = 720 * (mapList.map_height/mapList.map_width), // 获取到的图片的实际高度
          sW = 720, // 编辑器图片缩放尺寸width
          sH, // 编辑器图片缩放尺寸height
          vW = this.mapCfg.mapwidth, // 显示的高度
          vH = vW/oW*oH  // 显示的高度
      if (vH > this.mapCfg.mapwidth) {
        vH = this.mapCfg.mapwidth
        vW = vH/oH*oW
      }
      let windowH = window.innerHeight
      let windowW = window.innerWidth
      let maxH =  windowH > windowW ? windowH*0.7 : windowH*0.8
      let maxW = windowH > windowW ? windowW*0.9 : windowW*0.6
      if (this.isBigBtn && (mapList.map_height >= maxH || mapList.map_width >= maxW) ) {
      // 大图
        vH = maxH
        vW = vH/oH*oW
        if (vW > (maxW)) {
          vW = maxW
          vH = vW/oW*oH
        }
      }else if (this.isBigBtn) {
        // 小图
        vH = mapList.map_height
        vW = mapList.map_width
      }

      let mimiMapWrap = this.$refs.miniMap
      if (this.$store.getters.themeId != 5 && this.$store.getters.themeId != 8) {
        mimiMapWrap.style.left = -vW - 5 + "px"
      }
      mimiMapWrap.style.height = vH + "px"
      mimiMapWrap.style.width = vW + "px"
      this.$refs.mapBox.style.height = vH + "px"

      let ofsetSize = vW/36
      list.map((item, index) => {
        sH = sW / (oW/oH)
        vH = vW / (oW/oH)
        if(oW >= sW) {
          item.left = item.x * (vW/sW)
          item.top = item.y * (vH/sH)
        }
        else {
          item.left = item.x * (vW/oW) - (sW-oW)/2 * (vW/oW)
          item.top = item.y * (vW/oH)
        }

        this.styleObj.push({
          left: `${Number(item.left + ofsetSize).toFixed(2)}px`,
          top: `${Number(item.top + ofsetSize).toFixed(2)}px`,
          transform: `translate(-50%, -50%) rotate(${Number(item.degrees).toFixed(2)}deg)`
        })

        // 当前小地图点，添加背景图片
        if(item.scene_id == this.$krp.getSceneId()) {
          this.currentPoint = index

          this.$store.getters.sceneGroup.map(sclist => {
            sclist.scenelist.forEach( sc => {
              if (sc.scene_id === item.scene_id) {
                this.pointStarthlookat = sc.hlookat
                console.log('22',sc.hlookat)
              }
            })
          })

          this.styleObj = Object.assign(this.styleObj, {
            width: `${this.mapCfg.curpointwidth}px`,
            height: `${this.mapCfg.curpointheight}px`,
            backgroundSize: '100% 100%',
            backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/scan.png)`,
          })
        }
      })
      this.formatMapList = list
    },
    handleClick(id, index) {
      let sceneList = []
      this.$store.getters.sceneGroup.map(item => {
        sceneList = sceneList.concat(item.scenelist)
      })

      let sceneItem = sceneList.filter(item => item.scene_id == id)

      // 清除上次热点的背景图片
      this.styleObj[this.currentPoint].backgroundImage = `url()`
      this.styleObj[this.currentPoint].width = this.mapCfg.pointwidth
      this.styleObj[this.currentPoint].height = this.mapCfg.pointheight

      this.currentPoint = index
      // 触发场景分组，更新当前场景与分组的高亮状态
      this.$vgo.emit('sync:scene', sceneItem[0].scene_id)
    },
    tapImgScaleMap() {
      // 点击小图放大
      if (!this.isBigBtn) {
        this.bigMap()
      }
    },
    bigMap() {
      if(!this.isBigBtn) {
        // for(let k in this.mapCfg) {
        //   this.mapCfg[k] = this.mapCfg[k] * this.maxScle
        // }
        this.mapCfg.mapwidth *= this.maxScle
      } else {
        // for(let k in this.mapCfg) {
        //   this.mapCfg[k] = this.mapCfg[k] / this.maxScle
        // }
        this.mapCfg.mapwidth /= this.maxScle
      }
      this.isBigBtn = !this.isBigBtn
      // 触发了才显示放大后的图标
      this.num = 10
      // 重新更新数据
      this.getMap(this.miniMapData)
    },
    hideMap() {
      this.isShow = false
      this.isHandClose = true
    }
  },
  destroyed() {
    clearInterval(timer)
  },
  watch: {
    isShow(val) {
      if(val) {
        timer = setInterval(() => {
          this.num = this.$krp.getView().hlookat
        }, 200)
      }
      else {
        clearInterval(timer)
      }
    },
    num(val) {
      let list = this.formatMapList
      let sceneId = this.$krp.getSceneId()
      if(this.styleObj.length) {

        this.styleObj[this.currentPoint].backgroundImage = 'url()'
        list.map((item, index) => {
          if(sceneId == item.scene_id) {

            this.styleObj[index].width = this.mapCfg.curpointwidth + 'px'
            this.styleObj[index].height = this.mapCfg.curpointheight + 'px'
            this.styleObj[index].backgroundSize = '100% 100%'
            this.styleObj[index].transform = `translate(-50%, -50%) rotate(${item.degrees + val - this.pointStarthlookat}deg)`
            this.styleObj[index].backgroundImage = `url(${$globalconfig.URLS.API}krpano/images/scan.png)`

            this.currentPoint = index
          }
        })
        this.formatMapList = list
      }
    }
  },

}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/color.styl'
.theme-app-f .minimap,
.theme-pc-f .minimap
  left auto!important
.minimap
  position: absolute
  top: 30px
  right: 40px
  height: auto
  &.big
    position fixed
    transform translate(-50%, -50%)
    left 50%!important
    top 50%!important
  .zoom
    left: 0
    top: 0
    padding: 0 8px
    background-color: rgba($black, .5)
    z-index: 14
    i
      font-size: 18px
      color: $white

  .ctrl-box-top
    top: 0
    right: 0
    color: $white
    z-index: 14
    .icon
      width: 30px
      height: 18px
      line-height: 18px
      border-radius: 0
      &.active
        color: $white
        background: $danger
      i
        font-size: 16px
  .map-box
    box-sizing: border-box
    height: auto
    transition: all .6s
    img, .point
      position: absolute
      left: 0
      top: 0
      width: 100%
      transition: all .6s
      z-index: -1
    .point
      height: 100%
      z-index: 2
      .item
        position: absolute
        left: 50%
        top: 50%
        .circle
          width: 6px
          height: 6px
          border: 1px solid rgba($white, .9)
          border-radius: 50%
          background: $primary
</style>
